@font-face {
  font-family: "GenJyuuGothic-Regular-2";
  src: url(../../icon/font-fimily/GenJyuuGothic-Regular-2.ttf);
}

@font-face {
  font-family: "BaiBaiPangPang-WuDiKeAi-2";
  src: url(../../icon/font-fimily/BaiBaiPangPang-WuDiKeAi-2.ttf);
}

@font-face {
  font-family: "tiantianquanhahibaoziti";
  src: url(../../icon/font-fimily/tiantianquan.woff2);
}

* {
  margin: 0px;
  padding: 0px;
  font-family: "GenJyuuGothic-Regular-2" !important;
  box-sizing: border-box;
}

.forest-active:hover {
  opacity: 0.8;
  cursor: pointer;
}

.forest-active:active {
  opacity: 1;
}

.forest-router-isActive {
  color: var(--my-frame-color) !important;
  background-color: #E8E8E8;
  border-radius: 5px;
}

.forest-hover:hover {
  background-color: #f5f5f5;
  color: var(--my-frame-color) !important;
  transition: all 0.2s !important;
}

.is-friend-active {
  background-color: var(--my-frame-color) !important;

  .right-box-name {
    color: white !important;

    .name-and-time-up {
      .name {
        color: white !important;
      }
    }
  }
}




.friends-and-group-box {
  .el-radio-button__inner {
    padding: 8px 51px;
  }
}


.overflow-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}






.contacts-category-box-list {
  border: none;

  .el-collapse-item__header {
    border-bottom: none;
    height: 30px;
    padding: 0 12px 0 20px;

  }

  .el-collapse-item__wrap {
    border: none;
  }
}



input,
button,
a,
select,
img,
div {
  outline: none;
}

button:hover,
a:hover,
select:hover,
li:hover {
  cursor: pointer;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

button,
input,
optgroup,
option,
select,
textarea {
  /* font-family: inherit; */
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

.line1ppp {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.line2ppp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

body {
  background-color: #f5f5f5;
  color: black;
}

.right-box-wrapper .wrapper-box .left-friend-bar .friends-box .friends-and-group-box .el-radio-button__inner {
  padding: 8px 46px;
}

.contaner-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
}





@media (max-width: 1200px) {
  .contaner-box .friend-detail-wrapped-box .main-tool-wrapper-box .cell-box {
    margin-top: 30px !important;
    transition: all 0.5s;
  }

  .contaner-wrapper-box-vue .backgound-shade {
    display: none;
  }

  .contaner-wrapper-box-vue>.login_register-wrapper-box {
    .logo {
      width: 142px;
      position: fixed;
      top: 40px;
      left: calc(50% - 71px);
    }

    .auth-image {
      width: 800px;
      position: fixed;
      top: 0px;
      left: -420px;
      z-index: -1;
    }

    .auth-image2 {
      transform: scale(0.7);
      display: block;
      top: calc(100vh - 360px);
      left: calc(100vw - 420px);
    }

    .auth-container {
      max-width: 500px;
      height: 500px;
      /* // box-sizing: border-box;
    // margin-left: calc(100vw - 600px);
    // margin-top: calc(50vh - 250px); */
      display: flex;
      align-items: center;
      display: flex;
      justify-content: center;
    }
  }


  /* 中间大盒子的宽高盛满 */
  .contaner-wrapper-box-vue .wrapper {
    width: 100%;
    height: 100vh;
    margin: 0 0;
    transition: all .5s;
  }

  /* 选择好友tab */
  .right-box-wrapper .wrapper-box .left-friend-bar .friends-box .friends-and-group-box .el-radio-button__inner {
    padding: 8px 38px;
  }

  /* 左边好友选择栏 */
  .wrapper-box {
    width: 100% !important;
    flex: none;

    /* .left-friend-bar {
      width: 280px !important;
    }

    .right-detail-box {
      width: calc(100% - 280px);
    } */
  }

  /* 好友详情 和 群聊详情 */
  .friend-detail-wrapped-box {
    max-width: 100% !important;

  }

  .contaner-wrapper-box-vue>.wrapper .right-box-wrapper .message-wrapper {
    left: 0px;
  }
}

@media (max-width: 750px) {
  .contaner-wrapper-box-vue .backgound-shade {
    display: none;
  }

  .container-box>.notification-wrapper-item {
    height: 70px !important;
    padding: 0 15px !important;
  }


  .friend-detail-wrapped-box .notification-wrapper-item .right-extend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    .el-button:nth-child(2) {
      display: none;
    }

    .el-button:nth-child(3) {
      display: none;
    }

  }

  .contaner-box .titele-bar {
    display: none !important;
  }

  .wrapper-box .left-friend-bar .friends-box .is-friend-active {
    background-color: #fff !important;

    .right-box-name {
      color: #999999 !important;

      .name-and-time-up .name {
        color: #000000 !important;
      }
    }

  }

  .contaner-wrapper-box-vue {
    height: 100vh !important;

    .login_register-wrapper-box {
      .auth-container {
        transform: scale(.8);
        margin: 0 auto;
        margin-top: calc(50vh - 350px);
      }

      .auth-image2 {
        display: none;
      }

      .auth-image {
        position: fixed;
        width: calc(100vw + 50px);
        top: auto;
        left: 0px;
        bottom: -40vh;
      }

    }
  }

  .wrapper-box .right-detail-box {
    .friend-detail-wrapped-box {
      padding: 0 20px;

      .header-bar {
        display: none !important;
      }


    }

    .contaner-box {
      padding: 0 0px;
    }
  }

  .right-box-wrapper .wrapper-box .left-friend-bar .friends-box .friends-and-group-box .el-radio-button__inner {
    padding: 8px 18vw;
  }

  .contaner-wrapper-box-vue>.wrapper {
    flex-direction: column-reverse;

    .left-tool-bar {
      background-color: #F2F2F2;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-right: 1px solid #E9E9E9;
      width: 100vw;
      height: 50px;

      .up-bar {
        align-items: center;
        flex-direction: row;
        width: calc(100% - 34px);
        display: flex;
        justify-content: space-evenly;

        .header {
          margin-top: 0px;
        }

        .tool-item {
          margin-top: 0;
        }
      }

      .setting {
        margin-bottom: 0px;
        margin-right: 8%;

        .tool-item {
          margin-top: 0px;
        }
      }
    }

    .right-box-wrapper {
      width: 100%;
      height: calc(100% - 50px);

      .left-friend-bar {
        width: 100vw !important;
      }


      .message-wrapper {
        position: fixed;
        top: 0;
        left: 100%;
        transition: all .5s;
        width: 100%;
        width: 100%;
        height: 100%;
        z-index: 1;
        transform: scale(.8);
        opacity: .8;


        .top-tool-bar {


          div:nth-child(1) {
            display: flex;
            align-items: center;
            user-select: none;

            &:hover {
              color: var(--my-frame-color);
            }
          }

          div:nth-child(2) {
            text-align: center;
          }


        }
      }


      .right-detail-box {
        position: fixed;
        top: 0%;
        left: 100%;
        transition: all .5s;
        width: 100vw;
        height: 100vh;
        z-index: 1;
        transform: scale(.8);
        opacity: .8;

        .header-box {
          display: flex !important;
          height: 50px;
          padding: 0 10px;
          align-items: center;
          user-select: none;
          background-color: #fff;
          border-bottom: 1px solid #F5F5F5;
          cursor: pointer;
          justify-content: center;
          position: relative;
          color: #000;

          .left-back-icon-box {
            color: #8E8E8E;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100px;
            height: 100%;
            position: absolute;
            left: 15px;
            top: calc(50% - 25px);

            &:hover {
              color: var(--my-frame-color);
            }
          }
        }

        .contaner-box {
          .friend-detail-wrapped-box {
            overflow-y: scroll;
            padding-bottom: 100px;

            .header-box {
              border-bottom: none;
              display: none;
            }
          }
        }

      }

      .is-back {
        left: 0%;
        transform: scale(1);
        opacity: 1;
      }
    }
  }
}